<template>
  <navigator :url="`/pages/goods/goods?id=${item.goods_id}`" class="item u-border-bottom" hover-class="none">
    <view class="info">
	 <view class="photo" v-if="item.original_img">
			<image :src="item.original_img" mode="aspectFill"></image>
	 </view>		
      <view class="title">{{ item.goods_name }}</view>
      <view class="other">
        <view class="price">{{item.new_price}}<text class="old_price">{{item.old_price}}</text></view>
		<view>已售{{item.sales_sum}}</view>
      </view>
	  <view class="other">
	    <view class="gold_text">达人佣金<text class="gold">{{item.gold}}</text></view>
	  		<button class="u-reset-button tool-btn pay-btn">立即购买</button>
	  </view>
    </view>
   </navigator>
</template>

<script>
export default {
  props: {
    item: Object,
    showBottom: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
   // border:1px solid #ddd;
   // width:48%;
  // padding: 20rpx;
  margin: 10rpx 5rpx 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: #ffffff;
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
	  width:350rpx;
	  font-size: 12px;
	  color: #656364;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
    }
    .other {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #969696;
      margin-top: 10rpx;
	  margin-bottom:20rpx;
	  .pay-btn{
		  box-shadow: 0 7rpx 6rpx 0 rgba(229,138,0,.22);
		  background: #db3029;
		  color:#fff;
	  }
	  .tool-btn{
		  font-size: 28rpx;
		  font-weight: 100;
		  color: hsla(0,0%,100%,.9);
		  width: 140rpx;
		  min-height: 50rpx;
		  border-radius: 35rpx;
		  padding: 0;
		  margin-right: 20rpx;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center;
	  }
	  
	  .price{
		  font-size: 34rpx;
		  color: #ff3000;
		  font-weight: 600;
	  }
	  .gold_text{
		  line-height: 50rpx;
		  height:50rpx;
		  margin-left:10rpx;
	  }
	  .gold{
		 color: #ff3000; 
	  }
	  .price::before{
		content: "￥";
		font-size: 24rpx;  
	  }
	  .old_price{
		 font-size: 26rpx;
		 font-weight: 400;
		 text-decoration: line-through;
		 color: #c4c4c4;
		 margin-left:5rpx;
	  }
    }
  }
  .photo {
    // margin-left: 40rpx;
    image {
      height: 350rpx;
      width: 350rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
